import React from 'react';
import { useModel } from 'umi';
import styles from "./index.less";
import { Avatar, Statistic } from 'antd';
import { UserOutlined } from '@ant-design/icons';
import CountUp from 'react-countup';

/* 数字滚动配置 */
const countUpProps = {
  star: 0,
  duration: 2.75,
  useEasing: true,
  useGrouping: true,
  separator: ','
}

/*用户信息*/
const UserInfo = () => {

  const { initialState } = useModel('@@initialState');
  const { currentUser } = initialState;
  if (!currentUser) return null;
  return (
    <div className={styles.pageHeaderContent}>
      <div className={styles.avatar}>
        <Avatar size="large" src={currentUser.avatar} icon={<UserOutlined />} />
      </div>
      <div className={styles.content}>
        <div className={styles.contentTitle}>
          {currentUser.name}
        </div>
        <div>
          ID：{currentUser.userid}
        </div>
      </div>
    </div>
  )
}

/*用户数据*/
class DataInfo extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    const info = this.props.info || {};
    return (
      <div className={styles.extraContent}>
        <div className={styles.statItem}>
          <Statistic 
          title="下级机构数量" 
          formatter={() => (<CountUp end={info.subUnitNum} {...countUpProps} />)} />
        </div>
        <div className={styles.statItem}>
          <Statistic 
          title="今日借阅次数" 
          formatter={() => (<CountUp end={info.borrowNumOfToday} {...countUpProps} />)} />
        </div>
        <div className={styles.statItem}>
          <Statistic 
          title="今日到馆人数" 
          formatter={() => (<CountUp end={info.visitNumOfToday} {...countUpProps} />)} />
        </div>
      </div>
    )
  }
}

export default { UserInfo, DataInfo };
